<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="./highlight/styles/agate.css"> 
    <script src="./highlight/highlight.pack.js"></script> 
    <script > hljs.initHighlightingOnLoad();</script>
    <script src="./js/my-pre.js"></script>
</head>
<body>
    <div id="app">
        <my-con :init-click="input"></my-con>
        <my-pre :init-string="strings"></my-pre>
    </div>
    <script>
        var Child = {
            props:{
                initClick:{
                    type:String,
                    default:'first fuck'
                }
            },
            template:'<div><input type="text" v-model="inputs">{{inputs}}<br>{{message}}</div>',
            data (){
                return {
                    inputs:this.initClick,
                    message:'this is son data'
                }
            }
        }

        var app = new Vue({
            el:'#app',
            //在实例中注册局部组件
            components:{
                'my-con':Child
            },
            data:{
                input:'this is from parent data!',
                strings: hereDoc(function(){/*
                    <my-con :init-click="input"></my-con>

                    var Child = {
                        props:{
                            initClick:{
                                type:String,
                                default:'first fuck'
                            }
                        },
                        template:'<div><input type="text" v-model="inputs">{{inputs}}<br>{{message}}</div>',
                        data (){
                            return {
                                inputs:this.initClick,
                                message:'this is son data'
                            }
                        }
                    }
                    
                     var app = new Vue({
                        el:'#app',
                        //在实例中注册局部组件
                        components:{
                            'my-con':Child
                        },


                */})
            }
        })
    </script>
    
</body>
</html>